<template lang="pug">
    .my-4
        template(v-for="staff in staffList")
            .h4.mb-0.py-2 {{staff.jobTitle}}
                span.text-gray-600.lead.pl-1 (排名不分先后)
            .row.mt-4.mb-2
                template(v-for="teacher in staff.teacherList")
                    .col-6.col-sm-4.col-xl-3.mb-5
                        router-link(:to="teacherLink(teacher.tid)" class="portrait")
                            .card
                                img.card-img.h-100(:src="teacher.img")
                            h5.text-center.pt-2.mb-0 {{teacher.name}}

            //-
                .col-sm-6.col-md-4.col-xl-3.mb-5
                    a.card.card-portfolio.h-100(href='javascript:void(0);')
                        img.card-img-top(:src="imgList[2]", alt='...')
                        .card-body
                            .card-title 胡志刚
                .col-sm-6.col-md-4.col-xl-3.mb-5
                    a.card.card-portfolio.h-100(href='javascript:void(0);')
                        img.card-img-top(:src="imgList[3]", alt='...')
                        .card-body
                            .card-title 邓磊
                .col-sm-6.col-md-4.col-xl-3.mb-5
                    a.card.card-portfolio.h-100(href='javascript:void(0);')
                        img.card-img-top(:src="imgList[4]", alt='...')
                        .card-body
                            .card-title 邝砾
                .col-sm-6.col-md-4.col-xl-3.mb-5
                    a.card.card-portfolio.h-100(href='javascript:void(0);')
                        img.card-img-top(:src="imgList[5]", alt='...')
                        .card-body
                            .card-title Photo Face
            //
</template>

<script>
export default {
    name: 'teacher-list',
    props: {
        staffList: {
            type: Array,
            default: () => [
                {
                    jobTitle: '教授',
                    teacherList: [
                        {
                            name: '文兰',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de872f84b831.jpg',
                            tid: 1,
                        },
                        {
                            name: '陈佳洱',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/04/s5de78557f0d7e.jpg',
                            tid: 2,
                        },
                        {
                            name: '朱作言',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de87cc92b2d8.jpg',
                            tid: 3,
                        },
                        {
                            name: '林毅夫',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de87cbc40b45.jpg',
                            tid: 4,
                        },
                        {
                            name: '苏肇冰',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de876243c3a7.jpg',
                            tid: 5,
                        },
                        {
                            name: '张恭庆',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/03/s5de53e6125979.jpeg',
                            tid: 6,
                        },
                        {
                            name: '姜伯驹',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/03/s5de538203991f.jpeg',
                            tid: 7,
                        },
                    ],
                },
                {
                    jobTitle: '副教授',
                    teacherList: [
                        {
                            name: '文兰',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de872f84b831.jpg',
                            tid: 1,
                        },
                        {
                            name: '陈佳洱',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/04/s5de78557f0d7e.jpg',
                            tid: 2,
                        },
                        {
                            name: '朱作言',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de87cc92b2d8.jpg',
                            tid: 3,
                        },
                        {
                            name: '林毅夫',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de87cbc40b45.jpg',
                            tid: 4,
                        },
                        {
                            name: '苏肇冰',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de876243c3a7.jpg',
                            tid: 5,
                        },
                        {
                            name: '张恭庆',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/03/s5de53e6125979.jpeg',
                            tid: 6,
                        },
                        {
                            name: '姜伯驹',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/03/s5de538203991f.jpeg',
                            tid: 7,
                        },
                    ],
                },
                {
                    jobTitle: '讲师',
                    teacherList: [
                        {
                            name: '文兰',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de872f84b831.jpg',
                            tid: 1,
                        },
                        {
                            name: '陈佳洱',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/04/s5de78557f0d7e.jpg',
                            tid: 2,
                        },
                        {
                            name: '朱作言',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de87cc92b2d8.jpg',
                            tid: 3,
                        },
                        {
                            name: '林毅夫',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de87cbc40b45.jpg',
                            tid: 4,
                        },
                        {
                            name: '苏肇冰',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/05/s5de876243c3a7.jpg',
                            tid: 5,
                        },
                        {
                            name: '张恭庆',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/03/s5de53e6125979.jpeg',
                            tid: 6,
                        },
                        {
                            name: '姜伯驹',
                            img:
                                'https://www.pku.edu.cn/Uploads/Picture/2019/12/03/s5de538203991f.jpeg',
                            tid: 7,
                        },
                    ],
                },
            ],
        },
    },
    methods: {
        teacherLink(tid) {
            return '/teacher/' + tid;
        },
    },
};
</script>

<style scoped lang="scss">
.portrait {
    text-decoration: none !important;
    cursor: pointer;
    outline: none;
    color: inherit;
    //h5 {
    //    color: inherit !important;
    //}
    //&:hover {
    //    color: #323f52 !important;
    //}
}
//.card-portfolio {
//    .card-body {
//        .card-title {
//            font-size: 1.3rem;
//        }
//    }
//    @include media-breakpoint-up(lg) {
//        &:hover {
//            .card-body {
//                background-color: fade-out($white, 0.3);
//            }
//            .card-img-top {
//                transform: scale(1.05);
//            }
//        }
//    }
//}
</style>
